<template>
    <div v-loading="loading">
        <el-card body-style="padding:10px" class="box-card">
            <!-- <el-input clearable placeholder="请输入内容" size="small" style="width: 200px;" v-model="query.keyword"></el-input> -->
            <el-input clearable placeholder="请输入用户ID" size="small" style="width: 200px;" v-model="query.user_id"></el-input>
            <el-input clearable placeholder="请输入用户名" size="small" style="width: 200px;" v-model="query.user_name"></el-input>
            <el-input clearable placeholder="请输入内容" size="small" style="width: 200px;" v-model="query.content"></el-input>

            <!-- <span style="color: #555;margin-left: 30px;margin-right: 10px;">是否已删除</span>
            <el-switch @change="disableFun" active-color="#13ce66" inactive-color="#ff4949" v-model="disable"></el-switch> -->
            <el-select placeholder="选择是否已删除" v-model="query.contain_delete" @change="page=1;init()">
                <el-option :key="item.value" :label="item.name" :value="item.value" v-for="item in statusList"></el-option>
            </el-select>
            <el-button @click="page=1;init()" size="small" type="primary" style="margin-left: 30px;">搜索</el-button>
            <el-button @click="page=1;init()" icon="el-icon-refresh-right" size="small" type="primary" style="margin-left: 2px;">刷新</el-button>
        </el-card>

        <el-card body-style="padding:10px" class="box-card mt-10">
            <el-table :data="data" max-height="550px" size="small" style="width: 100%">
                <el-table-column label="ID" prop="creation_id"></el-table-column>

                <el-table-column label="用户ID" prop="user_id">

                    <template slot-scope="scope">
                        <UserInfo :user_id="scope.row.user_id" :userInfos="scope.row.author" v-if="scope.row.user_id"></UserInfo>
                    </template>
                </el-table-column>

                <!-- <el-table-column label="付费金额" prop="fee" ></el-table-column>   -->
                <el-table-column label="观看数" prop="viewed" >
                </el-table-column>  

                <el-table-column label="添加时间" sortable prop="created_at"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                 <div style="display: flex;">
                    <el-button size="mini" slot="reference" type="success" style="padding: 0 10px;height: 32px;margin-top: 10px;"  @click="toDetails(scope.row.creation_id)"  v-permission="['ADMIN','POSTS_DETAILS']">详情</el-button>
                   
                   <div  v-permission="['ADMIN','POSTS_FALSE_DELETE']">
                       <el-popconfirm @confirm="softDel(scope.row.creation_id)" title="确定要删除这个数据吗？"
                       v-if="query.contain_delete == 0" >
                       <el-button size="small" slot="reference" style="margin-left: 10px;margin-top: 10px;"
                           type="danger">软删除</el-button>
                   </el-popconfirm>

                   <el-button v-else @click="restore(scope.row.creation_id)" size="small" type="primary"
                       style="margin-left: 10px;margin-top: 10px;" >恢复</el-button>
                   </div>

                   <el-popconfirm @confirm="hardDel(scope.row.creation_id)" title="确定要删除这个数据吗？"
                       v-if="query.contain_delete == 0">
                       <el-button size="small" slot="reference" style="margin-left: 10px;margin-top: 10px;"
                           type="danger"  v-permission="['ADMIN','POSTS_TRUE_DELETE']">硬删除</el-button>
                   </el-popconfirm>
                 </div>
                        
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <!-- 分页组件 -->
        <el-card body-style="padding:10px" class="box-card mt-10">
            <el-pagination :current-page="page" :total="total" @current-change="pageChange" @size-change="sizeChange"
                layout="total, prev, pager, next, sizes" style="margin-top: 8px;" />
        </el-card>
    </div>
</template>
      
<script>
import medium from '@/components/medium/index'
import initData from '@/mixins/index'
export default {
    name:"post-list",
    mixins: [initData],
    components: {
        medium
    },
    data() {
        return {
            query: {
                content: '',
                contain_delete:0, //0未删除，2已删除
                user_id:'',
                user_name:''
            },
            visible: false,
            loading: false,
            disable: false,
            images: [],
            statusList:[
            {
                    name: "未删除",
                    value: 0
                },
                {
                    name: "已删除",
                    value: 2
                },
            ]
        }
    },
    mounted() {
        //this.getworksList()
        this.beforeInit()
    },
    methods: {
        toArray(str) {
            const arr = []
            arr.push(str)
            return arr
        },
        beforeInit() {
            this.url = '/creation/index?creation_type=infomation'
            this.init() //重新请求数据
        },

        // del(id) {
        //     this.$request.del('/label/delete/' + id).then((res) => {
        //         this.$message.success('删除成功')
        //         this.init() //重新请求数据

        //     })
        // },

        imagesFun(images) {
            this.visible = true
            this.images = images
            console.log(images)
        },
        closeBox() {
            this.type = 'create'
            this.visible = false

        },
        toDetails(id) {
            this.$router.push({ path: "/post-list-details?id=" + id});
        },

        softDel(id) {
            this.$request.del('/creation/delete_soft/' + id).then((res) => {
                this.$message.success('删除成功')
                this.init()
            })
        },

        hardDel(id) {
            this.$request.del('/creation/delete_real/' + id).then((res) => {
                this.$message.success('删除成功')
                this.init()
            })
        },
        restore(id){
            this.$request.put('/creation/delete_soft_recover/' + id).then((res) => {
                this.$message.success('恢复成功')
                this.init()
            })
        },
        disableFun(res) {
            console.log(res, '321')
            this.query.contain_delete = res == true ? 2 : 0
            this.init() //重新请求数据
        },



    },
}
</script>
      
<style lang="scss" scoped>
.butBox {
    background-color: rgb(219, 219, 219);
    border: none;
    color: #555;
}

.flex {
    display: flex;
}
</style>